<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath %>"><!-- 整个页面全部指定为这个地址 -->
	<meta charset="UTF-8">
	<title>用户列表</title>
	<link rel="stylesheet" href="res/js/layui/css/layui.css" media="all">
	<script type="text/javascript" src ="res/js/sweetalert2.js"></script>
	<script src="res/js/jquery-3.4.1.min.js" type="text/javascript"
			charset="utf-8"></script>
	<script src="res/js/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript">
        $.ajaxSetup({
            async : false
        });
        $(function(){
            $("#add").click(function(){
                //iframe层
                layer.open({
                    type: 2,
                    title: '用户增加或修改页面',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['45%', '95%'],
                    content: 'pages/userAddorUpdate.jsp', //iframe的url
                    end:function(){
                        table2.reload();
                    }
                });
            })
            $("#seachTable").on("click",function(){
                //执行重载
                //带条件查询
                table2.reload({
                    url: 'userController/findAll.action',
                    where: {
                        userName: $("#userName").val()
                    },
                    page: { curr: 1 }
                });
            })
        });


	</script>
</head>
<body style="padding: 5px;">
<div class="demoTable">
	搜索：
	<div class="layui-inline">
		<input class="layui-input" name="userName" id="userName" placeholder="用户名字关键字搜索" autocomplete="off">
	</div>
	<input type="button" id="seachTable" class="layui-btn layui-btn-normal" value="搜索" />
	<button type="button" class="layui-btn layui-btn-normal" id="add">增加用户</button>
	<table class="layui-hide" id="test" lay-filter="test"></table>
	<script type="text/html" id="toolbarDemo">
	</script>

	<script>
		var de="";
        layui.use('form', function(obj) {
            form = layui.form;
            form.on('switch(switchTest)', function(data) {
                de=data.value;
                Swal.fire({
                    type: 'warning', // 弹框类型
                    title: '是否有效操作', //标题
                    text: "请谨慎操作！", //显示内容

                    confirmButtonColor: '#3085d6',// 确定按钮的 颜色
                    confirmButtonText: '确定',// 确定按钮的 文字
                    showCancelButton: true, // 是否显示取消按钮
                    cancelButtonColor: '#d33', // 取消按钮的 颜色
                    cancelButtonText: "取消", // 取消按钮的 文字

                    focusCancel: true, // 是否聚焦 取消按钮
                    reverseButtons: true  // 是否 反转 两个按钮的位置 默认是  左边 确定  右边 取消
                }).then((isConfirm) => {
                    try {
                        //判断 是否 点击的 确定按钮
                        if (isConfirm.value) {
                    var url = 'userController/checked.action';
                    var c="";
                    if(this.checked==true){
                        c=1;
                    }else if(this.checked==false){
                        c=0;
                    }
                    var data = {
                        userId : de,
                        userState : c
                    };
                    var checked=this.checked;
                    $.post(url, data, function(one) {
                        if (one.state == 1) {
                            if (checked ==true) {
                                Swal.fire("成功", "用户已生效", "success");
                            }else{
                                Swal.fire("成功", "用户已失效", "success");
                            }
                        } else{
                            alert("操作失败!!!");
                        }
                    }, "json");
                }else {
                  $(".layui-laypage-btn").click();//还是之前的选中状态
                }
            }catch (e) {
                    alert(e);
                }
            });

            });
        });
        var table2=null;
        layui.use('table', function(){
            var table = layui.table;
            table2= table.render({
                elem: '#test'
                ,url:'userController/findAll.action'
                ,toolbar: '#toolbarDemo'
                ,title: '用户列表'
                ,cols: [[
                    {field:'userName', title:'用户名', width:180}
                    ,{field:'userPhone', title:'手机', width:120}
                    ,{field:'userEmail', title:'邮箱', width:120, sort: true}
                    ,{title:'是否有效', toolbar: '#cc', width:100}
                    ,{field:'userFoundDate', title:'创建时间', width:120}
                    ,{field:'userFoundUser', title:'操作人', width:120}
                    ,{field:'menuImage', title:'用户图片', width:120,templet:'#titleTpll'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:130}
                ]]
                ,page: true//开启分页
            });
            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'edit'){
                    var data1 = obj.data;//获取当前行
                    //iframe层
                    layer.open({
                        type: 2,
                        title: '用户修改页面',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['60%', '95%'],
                        content: 'pages/userAddorUpdate.jsp?id='+data1.userId, //iframe的url
                        end:function(){
                            table2.reload();
                        }
                    });
                }
            });




        });
	</script>
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑 </a>
	</script>
	<script type="text/html" id="cc">
		<input type="checkbox" value="{{d.userId}}"   name="open" id="checked" lay-skin="switch" lay-filter="switchTest" lay-text="是|否" {{d.userState=="1"?"checked":""}}>
	</script>
	<script type="text/html" id="titleTpll">
		<img src='{{d.userImg}}' alt='照片' onclick='showImg(this)' />
	</script>
</body>
</html>